<template>
	<view>
		<!-- 步骤进度条 -->
		<view class="progress-wrapper">
			<view class="line"></view>
			<view class="progress-step" v-for="(step, index) in steps" :key="index">
				<view class="step-circle" :class="{ 'completed': index < currentStep }">
					<text v-if="index < currentStep" class="step-num">{{ index + 1 }}</text>
					<text v-else class="step-num">{{ index + 1 }}</text>
				</view>
				<view class="step-line">{{step}}</view>
			</view>
		</view>
		<view class="authentication-info">
			<view class="item-wrap">
				<view class="item-wrap type">
					<view class="form-title color-title"><text class="required color-base-text">*</text>结算类型</view>
					<view class="type-wrap">
						<view :class="{
				  'selected color-base-text color-base-border':
					infoData.bank_account_type == 1,
				}" @click="infoData.bank_account_type = 1">
							<text>对私</text>
							<text class="iconfont iconduigou1 color-base-text"></text>
						</view>
						<view :class="{
				  'selected color-base-text color-base-border':
					infoData.bank_account_type == 4,
				}" @click="infoData.bank_account_type = 4">
							<text>对公</text>
							<text class="iconfont iconduigou1 color-base-text"></text>
						</view>
					</view>
				</view>
				<view class="item-wrap type">
					<view class="form-title color-title"><text class="required color-base-text">*</text>结算方式</view>
					<view class="type-wrap">
						<!-- <view :class="{
				  'selected color-base-text color-base-border':
					infoData.sett_mode == 1,
				}">
							<text>自动结算</text>
							<text class="iconfont iconduigou1 color-base-text"></text>
						</view> -->
						<view :class="{
				  'selected color-base-text color-base-border':
					infoData.sett_mode == 2,
				}">
							<text>手动结算</text>
							<text class="iconfont iconduigou1 color-base-text"></text>
						</view>
						<!-- <view :class="{
				  'selected color-base-text color-base-border':
					infoData.sett_mode == 3,
				}">
							<text>即时结算</text>
							<text class="iconfont iconduigou1 color-base-text"></text>
						</view> -->
						<!-- <view :class="{
				  'selected color-base-text color-base-border':
					infoData.sett_mode == 4,
				}">
							<text>自动+DO</text>
							<text class="iconfont iconduigou1 color-base-text"></text>
						</view> -->
					</view>
				</view>
				<view class="item-wrap type">
					<view class="form-title color-title"><text class="required color-base-text">*</text>结算周期类型</view>
					<view class="type-wrap">
						<!-- <view :class="{
				  'selected color-base-text color-base-border':
					infoData.sett_date_type == 1,
				}">
							<text>工作日（T）</text>
							<text class="iconfont iconduigou1 color-base-text"></text>
						</view> -->
						<view :class="{
				  'selected color-base-text color-base-border':
					infoData.sett_date_type == 2,
				}">
							<text>自然日（D）</text>
							<text class="iconfont iconduigou1 color-base-text"></text>
						</view>
						<!-- <view :class="{
				  'selected color-base-text color-base-border':
					infoData.sett_date_type == 3,
				}">
							<text>月结日</text>
							<text class="iconfont iconduigou1 color-base-text"></text>
						</view> -->
					</view>
				</view>
			</view>
			<view class="item-wrap">
				<view class="form-wrap">
					<text class="label"><text class="required color-base-text">*</text>结算周期</text>
					<text type="text" class="uni-input">{{ infoData.risk_day }}</text>
				</view>
				<view class="form-wrap input-img" v-if="alt_merchant_type==12">
					<text class="label"><text class="required color-base-text">*</text>开户许可证</text>
					<view class="img-wrap" @click="uplodImg('open_account_licence', 1)">
						<text class="iconfont iconadd1" v-if="!infoData.open_account_licence"></text>
						<image v-else :src="$util.img(infoData.open_account_licence)" mode="aspectFit"></image>
					</view>
				</view>
				<view class="form-wrap input-img" v-if="infoData.bank_account_type == 1">
					<text class="label"><text class="required color-base-text">*</text>结算银行卡</text>
					<view class="img-wrap" @click="uplodImg('bank_card', 1)">
						<text class="iconfont iconadd1" v-if="!infoData.bank_card"></text>
						<image v-else :src="$util.img(infoData.bank_card)" mode="aspectFit"></image>
					</view>
				</view>
				<view class="form-wrap">
					<text class="label"><text class="required color-base-text">*</text>银行账户名称</text>
					<input type="text" class="uni-input" :placeholder="
				infoData.bank_account_type == 1
				  ? '银行账户与法人名称必须一致'
				  : '银行账户与企业名称必须一致'
			  " v-model="infoData.bank_account_name" />
				</view>
				<view class="form-wrap">
					<text class="label"><text class="required color-base-text">*</text>银行账号</text>
					<input type="text" class="uni-input" placeholder="请输入银行账号" v-model="infoData.bank_account_no" />
				</view>
				<view class="form-wrap" v-if="infoData.bank_account_type == 4">
					<text class="label"><text class="required color-base-text">*</text>联行号</text>
					<input type="text" class="uni-input" placeholder="请输入联行号" v-model="infoData.bank_channel_no" />
				</view>
			</view>
		</view>
		<view class="set-next">
			<button type="default" @click="toPrevious()">上一步</button>
			<button type="primary" @click="toNext()">下一步</button>
		</view>

	</view>
</template>

<script>
	import validate from "@/common/js/validate.js";
	export default {
		components: {},
		data() {
			return {
				steps: ['基本信息', '商户资料', '银行账户', '线上店铺'],
				currentStep: 3,
				items: [],
				infoData: {
					bank_account_type: 1,
					sett_mode: 2,
					sett_date_type: 2,
					risk_day: 1,
				},
				alt_merchant_type:12
			};
		},
		async created() {
			for (let i = 0; i < 28; i++) {
				this.items.push(i + 1);
			}
			this.getApplication();
		},
		onShow() {
			let companyInfo = uni.getStorageSync("application_companyInfo");
			if (companyInfo) {
				this.alt_merchant_type = companyInfo.alt_merchant_type
			}
		},
		methods: {
			// 获取是否进件是否审核通过
			async getApplication() {
				return new Promise((resolve, reject) => {
					this.$api.sendRequest({
						url: "/shopapi/apply/getShopApplyStatus",
						data: {
							member_id: uni.getStorageSync("member_id"),
						},
						success: (res) => {
							if (res.data) {
								if (res.data) {
									this.infoData = {
										bank_account_type: res.data.bank_account_type,
										sett_mode: 2,
										sett_date_type: 2,
										risk_day: 1,
										bank_card: res.data.bank_card,
										open_account_licence: res.data.open_account_licence,
										bank_account_name: res.data.bank_account_name,
										bank_account_no: res.data.bank_account_no,
										bank_channel_no: res.data.bank_channel_no,
									};
								}
							}
						},
					});
					resolve();
				});
			},
			toPrevious() {
				uni.navigateBack({
					delta: 1,
				});
			},
			toNext() {
				if (this.vertify()) {
					uni.setStorageSync("application_bankInfo", this.infoData);
					uni.navigateTo({
						url: "/pages/apply/material",
					});
				}
			},
			
			uplodImg(type, pan) {
				this.$util.upload({
						number: 1,
						path: "image",
					},
					(res) => {
						if (res) {
							this.$util.showToast({
								title: "上传成功",
							});
							if (type == "bank_card") {
								this.$set(this.infoData, "bank_card", res[0]);
							}
							if (type == "open_account_licence") {
								this.$set(this.infoData, "open_account_licence", res[0]);
							}
						}
					}
				);
			},
			getOcrInfo(type, pan, url) {
				this.$api.sendRequest({
					url: "/shopapi/upload/getOcrInfo",
					data: {
						urlPic: url,
						type: type == "trade_licence" ? 3 : type == "bank_card" ? 2 : 1,
						side: pan,
					},
					success: (res) => {
						if (res.code == 0 && res.data) {
							let data = res.data;
							if (type == "bank_card") {
								this.$set(this.infoData, "bank_account_no", data.number);
							}
						} else {
							// this.$util.showToast({
							// 	title: res.message
							// });
						}
					},
				});
			},
			vertify() {
				let rule = [{
						name: "bank_account_name",
						checkType: "required",
						errorMsg: "请输入银行账户名称",
					},
					{
						name: "bank_account_no",
						checkType: "required",
						errorMsg: "请输入银行账户名称",
					},
				];
				if (this.infoData.bank_account_type == 1) {
					rule.push({
						name: "bank_card",
						checkType: "required",
						errorMsg: "请上传结算银行卡",
					});
				} else {
					rule.push({
						name: "open_account_licence",
						checkType: "required",
						errorMsg: "请上传开户许可证",
					});
					rule.push({
						name: "bank_channel_no",
						checkType: "required",
						errorMsg: "请输入联行号",
					});
				}
				let checkRes = validate.check(this.infoData, rule);
				if (checkRes) {
					return true;
				} else {
					this.$util.showToast({
						title: validate.error,
					});
					return false;
				}
			},
		},
	};
</script>

<style lang="scss">
	.authentication-info {
		overflow: hidden;
		margin: 40rpx;
		background-color: #fff;
		border-radius: 20rpx;
	}

	.item-wrap {
		margin-top: 20rpx;
		background-color: #fff;

		&.type {
			padding: 20rpx 30rpx;
		}

		.form-wrap {
			display: flex;
			align-items: center;
			margin: 0 $margin-both;
			border-bottom: 1px solid $color-line;
			height: 100rpx;
			line-height: 100rpx;
			justify-content: space-between;

			&:last-child {
				border-bottom: none;
			}

			.label {
				margin-right: $margin-both;
				vertical-align: middle;
			}

			input {
				vertical-align: middle;
				display: inline-block;
				flex: 1;
				text-align: right;
			}

			&.more-wrap {
				.selected {
					vertical-align: middle;
					display: inline-block;
					flex: 1;
					text-align: right;
					color: $color-tip;
					overflow: hidden;
					white-space: pre;
					text-overflow: ellipsis;

					&.have {
						color: $color-title;
					}
				}

				.iconfont {
					color: $color-tip;
					margin-left: 20rpx;
				}
			}

			.value {
				font-weight: bold;
				vertical-align: middle;
				display: inline-block;
				flex: 1;
				text-align: right;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: pre;
			}

			&.input-img {
				height: 240rpx;
				line-height: 200rpx;
				display: block;

				.img-wrap {
					position: relative;
					float: right;
					display: inline-block;
					margin-top: 30rpx;
					width: 300rpx;
					height: 140rpx;
					line-height: 140rpx;
					text-align: center;
					border: 2rpx dashed $color-disabled;

					.iconfont {
						font-size: 68rpx;
						color: $color-disabled;
					}

					image {
						width: 100%;
						height: 100%;
					}

					.tips {
						position: absolute;
						bottom: -70rpx;
					}
				}
			}
		}

		.type-wrap {
			display: flex;
			// align-items: center;
			// justify-content: space-between;
			margin: 20rpx 30rpx;

			view {
				flex: 1;
				position: relative;
				margin-right: 40rpx;
				height: 70rpx;
				line-height: 70rpx;
				text-align: center;
				color: $color-tip;
				border: 2rpx solid $color-disabled;
				border-radius: 12rpx;
				padding: 0 30rpx;

				&:last-child {
					margin-right: 0;
				}

				.iconfont {
					position: absolute;
					right: -24rpx;
					bottom: -20rpx;
					font-size: 80rpx;
					display: none;
				}

				&.selected {
					.iconfont {
						display: block;
					}
				}
			}
		}
	}

	.form-title {
		margin-bottom: $margin-updown;
	}

	.set-next {
		display: flex;
		align-items: center;
		justify-content: space-around;
		margin-top: 80rpx;
		padding-bottom: 80rpx;

		button {
			flex: 1;
		}
	}

	.flex_1 {
		flex: 1;
		text-align: right;
		padding-top: 40rpx;

		input {
			height: 100rpx;
			display: block;
		}
	}

	.time-change {
		display: flex;
		align-items: center;
		flex: 1;
		justify-content: flex-end;
	}

	.picker {
		vertical-align: middle;
		display: inline-block;
		flex: 1;
		text-align: right;

		.iconfont {
			vertical-align: middle;
		}
	}	.progress-wrapper {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 66rpx 0;
		background-color: #fff;
		.line {
			height: 14rpx;
			width: 80%;
			background-color: #f9f9f9;
			border-radius: 20rpx;
			display: block;
			position: absolute;
			top: 90rpx;
			left: 10%;
		}
		
		.progress-step {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			text-align: center;
			width: 25%;
		}
		
		.step-circle {
		  width: 52rpx;
		  height: 52rpx;
		  border-radius: 50%;
		  background-color: #f6f6f6;
		  display: flex;
		  align-items: center;
		  justify-content: center;
		  position: relative;
		  box-shadow: 0 0 0px 14rpx #f6f6f6;
		  color: #999;
		  font-weight: bold;
		}
		
		.completed {
		  background-color: #ff6a00;
		  box-shadow: 0 0 0px 14rpx #ff00002e;
		  color: #FFF;
		}
		
		.step-line {
			margin-top: 50rpx;
		}
	}
	
	.apply_button {
		margin: 60rpx 20%;
		padding-bottom: 80rpx;
		text-align: center;
		.tips {
			margin: 20rpx 0;
			font-size: $font-size-tag;
		}

		button {
			margin-top: 40rpx;
		}
	}
</style>